<script setup lang="ts">
import { useUpload } from '@/hooks/useUpload'
import { useInstStore } from '@/stores'
import { predefinedColors } from '@/utils/constants'
import { isColorMatches, toUnifiedFormatColor } from '@/utils/helper'
import { Input, Space, Textarea } from 'ant-design-vue'
import { computed } from 'vue'

defineOptions({
  name: 'PageAttr',
})
const mockImg = __DEV_IMG__
const instStore = useInstStore()

const themeColorIsValid = computed(() => isColorMatches(instStore.detail?.themeColor as string))

const { uploadAction: handleChooseFile } = useUpload({
  successHandler({ url }) {
    instStore.detail!.shareImage = url
  },
})
function handleThemeValueBlur(ev: any) {
  const nextValue = toUnifiedFormatColor(ev.target.value)
  ev.target.value = nextValue
  instStore.detail!.themeColor = nextValue
}
</script>

<template>
  <div v-if="instStore.detail">
    <div class="block-item">
      <div class="block-title">
        主题颜色
      </div>
      <div class="color-wrap">
        <div class="colors">
          <div
            v-for="color of predefinedColors" 
            :key="color.value" 
            class="color" 
            :class="color.value === instStore.detail.themeColor ? 'active-color' : ''" 
            :style="{ background: color.value }"
            @click="instStore.detail.themeColor = color.value"
          >
            <div class="active-flag">
              <i class="i-ant-design:check-outlined w-16px h-16px block mt-1 ml-1" :style="{ color: color.value }" />
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-row items-center gap-2 mt-14px">
        <span class="text-second-app text-sm">色值</span>
        <div class="flex flex-row items-center gap-2 px-3 border border-solid border-[var(--app-color-border)] w-176px">
          <div class="box-border w-4 h-4 flex-none" :style="{ backgroundColor: instStore.detail.themeColor }" />
          <Input v-model:value="instStore.detail.themeColor" placeholder="#RRGGBB" :bordered="false" :max-length="7" class="text-main-app" @blur="handleThemeValueBlur" />
        </div>
      </div>
      <div v-if="!themeColorIsValid" class="text-sm text-red-500 py-1">
        颜色值格式有误，请及时纠正!
      </div>
    </div>
    <div class="block-item">
      <div class="block-title">
        主题样式
      </div>
      <div class="styles">
        <Space wrap :size="8">
          <div v-for="item in 5" :key="item" class="style">
            <img :src="mockImg" width="100%" height="100%" class="block object-cover">
            <div class="style-desc">
              简约现代
            </div>
          </div>
        </Space>
      </div>
    </div>
    <div class="block-item">
      <div class="block-title">
        名称
      </div>
      <Input v-model:value="instStore.detail.name" />
    </div>
    <div class="block-item">
      <div class="block-title">
        路径
      </div>
      <Input v-model:value="instStore.detail.path" placeholder="前台预览url" />
    </div>
    <div class="block-item">
      <div class="block-title">
        分享设置
      </div>
      <div class="control-item">
        <div class="control-label">
          标题
        </div>
        <Input v-model:value="instStore.detail.shareTitle" placeholder="请输入标题" show-count :max-length="20" />
      </div>
      <div class="control-item">
        <div class="control-label">
          配图
        </div>
        <div class="control-upload" :style="{ backgroundImage: `url(${instStore.detail.shareImage})` }" @click="handleChooseFile">
          <img v-if="!instStore.detail.shareImage" src="/images/upload-placeholder.png" :width="32" :height="32" class="w-32px h-32px">
          <span v-if="!instStore.detail.shareImage" class="text-xs text-second-app mt-6px">上传配图</span>
        </div>
      </div>
      <div class="control-item">
        <div class="control-label">
          描述
        </div>
        <Textarea v-model:value="instStore.detail.shareDescription" placeholder="请输入描述内容" :rows="4" show-count :max-length="100" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.block-item {
    @apply mb-6;
}
.block-title {
    color: var(--app-text-color-main);
    @apply text-sm font-700 mb-14px;
}
.color-wrap {
    box-sizing: border-box;
}
.colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    .color {
        height: 40px;
        aspect-ratio: 68 / 40;
        transition: 0.3s;
        @apply rounded cursor-pointer relative;
    }
    .color:hover,
    .color.active-color {
        transform: scale(1.05);
    }
    .color.active-color {
        .active-flag {
            width: 40px;
            height: 40px;
            bottom: -18px;
            right: -18px;
            clip-path: rect(0px 20px 20px 0px);
            @apply rounded-full bg-white absolute;
        }
    }
}
.control-item {
    @apply box-border mb-14px;
    .control-label {
        color: var(--app-text-color-second);
        @apply text-sm font-normal mb-2;
    }
}
.styles {
    --h: 180px;
    height: var(--h);
    overflow-y: auto;
    .style {
        width: 83px;
        height: var(--h);
        border: 1px solid #EEE;
        @apply rounded overflow-hidden relative box-border cursor-pointer;
        &.active-style {
            border-color: var(--app-color-primary);
        }
        .style-desc {
            background-color: rgba(0, 0, 0, 0.6);
            @apply hidden absolute left-0 top-0 right-0 bottom-0 text-white text-sm !leading-[var(--h)] text-center;
        }
        &:hover .style-desc {
            @apply block;
        }
    }
}
.control-upload {
    width: 100px;
    height: 100px;
    background: #F5F7FA;
    background-size: cover;
    background-repeat: no-repeat;
    @apply flex flex-col justify-center items-center rounded cursor-pointer;
    &:hover {
        border: 1px solid var(--app-color-primary);
    }
}
</style>
